@import 'var';

* {
  margin: 0;
  padding: 0;
}

a {
  color: $theme-color;
}

nav {
  width: $theme-width;

  li {
    border-left: 1px solid $theme-color;

    a {
      padding: 0 20px;

      // & 表示父级，即 a
      &:hover {
        color: yellow;
      }
    }
  }
}

ul {
  li {
    width: 200px;

    // + 选中下一个兄弟元素
    +.one {
      height: 100px;
    }
  }
}

.side-bar {
  border: {
    style: solid;
    width: 2px;
    color: red;
  }
}

@mixin center($w: 400px) {
  margin: 0 auto;
  width: $w;
}

.content {
  height: 200px;
  @include center(800px);
}

.error {
  border: 1px solid red;
  background-color: aqua;
}

.serious-error {
  @extend .error;
  border-width: 3px;
  font-size: 18px;
}

.demo {
  width: 200px;
  height: 200px;
  background-color: randomColor();
}

$c: random(3);

p {
  @if $c ==1 {
    color: red;
  }

  @else if $c ==2 {
    color: blue;
  }

  @else {
    color: green;
  }
}

@for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}